<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号-注册</title>
    <link rel="stylesheet" href="./css/zhuce.css">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
</head>

<body>
    <!-- 首部部分 start-->
    <div class="top">
        <a href="index.html" class="title"></a>
        <h4>注册小米账号</h4>
        <div class="middle">
            <form enctype="multipart/form-data">
                <div style="width:500px;float:left;margin:0 20px;">
                    <br />
                    <span class="p">*</span>
                    <label for="username" class="l">用户名:</label>
                    <div style="position:relative;display:inline;">
                        <input id="username" name="username" type="text"
                            style="height:30px;width:250px;padding-right:50px;"><span id="showUser"></span>
                    </div>
                    <br /><br />
                    <span class="p">*</span>
                    <label for="phonenumber" class="l">手机号:</label>
                    <div class="d">
                        <input id="phonenumber" type="text" class="i">
                    </div>
                    <br /><br />
                    <span class="c">*</span>
                    <label for="login_password" class="l">登录密码:</label>
                    <div class="d">
                        <input id="userpass" name="userpass" type="text" class="i"><span id="showPass"></span>
                    </div>
                    <br /><br />
                    <span class="c">*</span>
                    <label for="confirm_password" class="l">确认密码:</label>
                    <div class="d">
                        <input id="confirm_password" type="text" class="i">
                    </div>
                    <br /><br />
                    <!-- <span class="p">*</span>
                    <label for="ver_code" class="l">验证码:</label>
                    <div class="d">
                        <input id="ver_code" type="text" class="i">
                    </div> -->
                    <!-- <br /><br /> -->
                    <input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1" />
                    <span style="font-size:10px;">我已阅读并同意《用户注册协议》</span>
                    <br /><br />
                    <!-- <input type="submit" id="btnReg" value="同意以上协议并注册"
                        style="margin-left:100px;height:30px;width:300px;background-color:#FF6700;display:inline-block; border:none;color:white;font-size: 14px;" />
                    <div id="messageBox">

                    </div> -->
                    <input id="btnReg" type="button" value="同意以上协议并注册"  style="margin-left:100px;height:30px;width:300px;background-color:#FF6700;display:inline-block; border:none;color:white;font-size: 14px;"/>
                    <div id="messageBox">

                    </div>
                </div>
            </form>

        </div>
    </div>
    <!-- 首部部分 end -->

    <!-- 尾部部分 start -->
    <div class="footer">
        <ul>
            <li><a href="#">简体</a><span>|</span></li>
            <li><a href="#">繁体</a><span>|</span></li>
            <li><a href="#">English</a><span>|</span></li>
            <li><a href="#">常见问题</a><span>|</span></li>
            <li><a href="#">隐私政策</a></li>
        </ul>

    </div>
    <!-- 尾部部分 end -->
</body>

</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
    //一、先做前端的表单验证（正则时讲过），
    // 表单验证：非空判断，格式是否正确


    //二、后端验证：
    //  发送请求，在数据库中查找用户名是否存在


    //三、以上验证都没有问题，才进行注册。


    // -----------------------

    // 一、先做前端的表单验证
    //功能：所有前端的验证；
    function isTest() {
        return isUserName() && isPass();
    }

    //1、用户名的前端验证
    function isUserName() {
        //1)、非空判断
        if ($("#username").val() == "") {
            return false;
        }
        //2)、格式判断
        // 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
        let reg = /^[a-zA-Z_]\w{1,9}$/;
        if (!reg.test($("#username").val())) {
            return false;
        }
        return true;
    }


    //2、密码的前端验证
    function isPass() {
        //1)、非空判断
        if ($("#userpass").val() == "") {
            return false;
        }
        //2)、格式判断
        // 数字，6-16位
        let reg = /^\d{6,16}$/;
        if (!reg.test($("#userpass").val())) {
            return false;
        }
        return true;
    }

    //二、后端验证
    let hasUser = false;//该用户名不存在
    function hasUserBack() {
        //后端验证用户名是否存在
        $.get("goodsAndShoppingCart/checkUser.php", { "username": $("#username").val() }, function (data) {
            if (data.trim() == "0") {
                $("#showUser").html("亲，该用户名已经存在，请重新思考！");
                $("#showUser").css({ "color": "red" });
                hasUser = true;
            } else {
                $("#showUser").html("亲，该用户名可以使用，赶紧注册吧！");
                $("#showUser").css({ "color": "green" });
                hasUser = false;
            }
        })
    }

    $(function () {
        $("#username").blur(function () {
            //1、前端验证
            if (isUserName() == false) {
                $("#showUser").html("亲，用户名的格式不正确！");
                return;
            }
            //2、后端的验证
            hasUserBack();
        });

        $("#userpass").blur(function () {
            //1、前端验证
            if (isPass() == false) {
                $("#showPass").html("亲，密码格式不正确	！");
                return;
            } else {
                $("#showPass").html("√");
            }
        });

        $("#btnReg").click(function () {
            //1、前端验证
            if (isTest() == false) {
                $("#messageBox").html("亲，您的信息输入不全");
                return;
            }
            //2、用户名是否存在(后端验证)
            if (hasUser) {
                return;
            }

            $.post(
                "goodsAndShoppingCart/addUser.php",
                {
                    "username": $("#username").val(),
                    "userpass": $("#userpass").val()
                },
                function (data) {
                    if (data.trim() == "success") {
                        $("#messageBox").css({ "color": "green" });
                        $("#messageBox").html("恭喜您，注册成功！2秒后跳转到<a href='login.html'>登录</a>页面");
                        setTimeout(() => {
                            location.href = "login.html";
                        }, 2000);
                    } else if (data.trim() == "fail") {
                        $("#messageBox").css({ "color": "red" });
                        $("#messageBox").html("不好意思，注册失败!");
                    } else {
                        $("#messageBox").css({ "color": "red" });
                        $("#messageBox").html("不好意思，服务器出问题了!");
                    }
                }
            );
        });
    });

</script>